<template>
  <div class="w-full h-full flex">
    <div class="w-200px h-full bg-white border-r-2 border-gray-100">
      <n-menu v-model:value="activeKey"  :options="menuOptions" @update:value="handleUpdateValue" />
    </div>
    <div class="w-200px h-full bg-white border-r-2 border-gray-100 flex justify-center">
      <div class="border-b border-gray-100 w-full flex">
        <n-button-group size="small" class="w-full">
          <n-button type="default" class="w-1/4">
            刷新
          </n-button>
          <n-button type="default" class="w-1/4">
            删除
          </n-button>
          <n-button type="default" class="w-1/4">
            已读
          </n-button>
          <n-button type="default" class="w-1/4">
            更多
            <n-icon>
              <DownOutlined></DownOutlined>
            </n-icon>
          </n-button>
        </n-button-group>
      </div>
    </div>
    <div class="flex-1 h-full bg-white">
      <n-watermark
          class="w-full h-full"
          content="核心机密"
          cross
          selectable
          :font-size="16"
          :line-height="16"
          :width="192"
          :height="128"
          :x-offset="12"
          :y-offset="28"
          :rotate="-15"
      >
        awsasd
      </n-watermark>
    </div>
    <model ref="Editref"></model>
  </div>
</template>

<script setup  name="Email">
import model from "./model.vue"
import {useRoute, useRouter} from "vue-router";
import {DownOutlined} from "@vicons/antd"
const router = useRouter()
const route = useRoute()
const Editref=ref(null)
const menuOptions=ref([     // 菜单列表
  {label: '收件箱', key: 'shoujian',},
  {label: '发件箱', key: 'fajian',},
  {label: '未读邮件', key: 'weidu',},
  {label: '已收藏', key: 'shoucang',},
  {label: '已删除', key: 'shanchu',},
  {label: '草稿箱', key: 'caogao',},
  {label: '写邮件', key: 'xiexin',},
])
const activeKey=ref("")   // 激活的菜单

const handleUpdateValue=(key)=>{   // 点击菜单回调
  switch (key){
    case "shoujian":
      break;
    case "fajian":
      break;
    case "weidu":
      break;
    case "shoucang":
      break;
    case "shanchu":
      break;
    case "caogao":
      break;
    case "xiexin":
      Editref.value.init("add")
      break;
  }
}
</script>

<style scoped>

</style>
